<!DOCTYPE html>
<html>
<head>
    <title>Mapbox GL</title>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="lib/mapbox-gl.css" type="text/css">
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; overflow: hidden }
    </style>
</head>

<body>
<div id='map'></div>
<script src="./lib/mapbox-gl.js"></script>
<script>
    const style = {
        "version": 8,
        "name": "Mapbox Streets",
        "sources": {
            "amap-tile": {
                "type": "raster",
                "scheme": "xyz",
                "tiles": [
                    'http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
                    'http://webrd02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
                    'http://webrd03.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
                    'http://webrd04.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
                ],
                "tileSize": 256
            }
        },
        "layers": [
            {
                "id": "amap-tile",
                "type": "raster",
                "source": "amap-tile",
                "minzoom": 0,
                "maxzoom": 17
            }
        ]
    }
    var map = new mapboxgl.Map({
        container: 'map',
        style: style,
        center: [107.11040599933166, 34.26271532332011],
        zoom: 3
    });

    map.on('load', () => {
        map.addSource('geoserver-tile', {
            "type": "vector",
            "scheme": "xyz",
            "tiles": [
                'http://localhost:13000/{z}/{x}/{y}.pbf'
                // 'http://localhost:63344/sfmap/tile/china/{z}/{x}/{y}.pbf'
            ]
        })
        map.addLayer({
            id: 'geoserver-tile-line',
            type: 'line',
            source: 'geoserver-tile',
            // 'source-layer': 'layer_province',
            'source-layer': 'province',
            paint: {
                'line-color': '#f00',
                'line-width': 1,
                'line-opacity': 1
            }
        })
        map.addLayer({
            id: 'geoserver-tile-line1',
            type: 'fill',
            source: 'geoserver-tile',
            // 'source-layer': 'layer_province',
            'source-layer': 'city_gd',
            paint: {
                'fill-color': '#3c80f6',
                'fill-opacity': 0.2
            }
        })
    })
</script>
</body>
</html>
